<template>
  <div class="view-container">

    <div class="filter-container">
      <el-form :inline="true" :model="queryParams" class="filter-form-inline" label-position="right" label-width="100px"
               size="small">

        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :lg="6" :xs="8">
            <el-form-item label="代理名称" style="width: 100%">
              <el-input v-model="queryParams.agentName" clearable placeholder="代理名称"/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="8">
            <el-form-item label="产品名称" style="width: 100%">
              <el-input v-model="queryParams.productName" clearable placeholder="产品名称"/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="8">
            <el-form-item label="负责营销职员" style="width: 100%">
              <el-select v-model="queryParams.headId" placeholder="请选择营销职员" style="width: 100%">
                <el-option v-for="item in headList" :key="item.id" :label="item.realName" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="8">
            <el-form-item style="width: 100%">
              <div style="display: flex; justify-content: space-between">
                <div style="width: 210px;flex-shrink: 0">
                  <el-button class="border-btn" @click="handlReset">重置</el-button>
                  <el-button class="main-btn" type="primary" @click="handlSearch">搜索</el-button>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>

    <div class="main-content" style="padding-top: 0">

      <div class="list-container">
        <table-view :cell-style="cellStyle" :data="tableData" border header-cell-class-name="table-header"
                    @row-click="aloneClick" @sort-change="handlSort">

          <el-table-column v-if="checkListData.indexOf('relationNo') !== -1" :min-width="180" align="center" fixed="left"
                           label="明细编号" prop="saleDetailNo"/>

          <el-table-column v-if="checkListData.indexOf('deliveryTime') !== -1" :min-width="140" align="center"
                           fixed label="发货日期" sortable="custom">
            <template #default="{row}">
              {{ dateFormat("yyyy-mm-dd", row.deliveryTime) }}
            </template>
          </el-table-column>

          <el-table-column v-if="checkListData.indexOf('agentName') !== -1" :min-width="160" :show-overflow-tooltip="true"
                           header-align="center" label="代理商名称" prop="agentName"/>

          <el-table-column v-if="checkListData.indexOf('productPopularName') !== -1" :min-width="400" :show-overflow-tooltip="true"
                           header-align="center" label="产品信息">
            <template #default="{row}">
              {{ getProductName(row.productInfo) }}
            </template>
          </el-table-column>

          <el-table-column v-if="checkListData.indexOf('saleNum') !== -1" :min-width="100" align="center" label="营销数量"
                           prop="saleNum"/>

          <el-table-column v-if="checkListData.indexOf('sellUnit') !== -1" :min-width="100" align="center" label="计价单位"
                           prop="sellUnit">
            <template #default="{row}">
              {{ getLabel('sell_unit', row.sellUnit) }}
            </template>
          </el-table-column>

          <el-table-column v-if="checkListData.indexOf('headName') !== -1" :min-width="120" align="center"
                           label="负责营销职员" prop="headName"/>

          <el-table-column v-if="checkListData.indexOf('createdAt') !== -1" :min-width="120" align="center" fixed="right"
                           label="记账日期" sortable="custom">
            <template #default="{row}">
              {{ dateFormat("yyyy-mm-dd", row.createdAt) }}
            </template>
          </el-table-column>

        </table-view>
        <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.page"
                    :total="total" style="display: flex; justify-content: flex-end" @pagination="handlList"/>
      </div>

    </div>

    <detail-drawer ref="terminalDetailRef" custom-title>
      <template #title>
        {{ rowData?.agentName }}
      </template>
      <template #contents>
        <terminalDetailRef :id="rowData?.id"/>
      </template>
    </detail-drawer>

  </div>
</template>

<script>
import {defineAsyncComponent, inject, onMounted, reactive, toRefs,} from "vue";
import {useRouter} from "vue-router";
import {crmStore} from "@CRM/store";

export default {
  components: {
    terminalDetailRef: defineAsyncComponent(() =>
        import("../details/index.vue")
    ),
  },
  setup(props, context) {
    const api = inject("api");
    const router = useRouter();
    const data = reactive({
      visible: false,
      queryParams: {
        productName: "", //
        pageSize: 20,
        page: 1,
        value: [],
        deliveryTimeSort: "", // // 发货/配送时间排序
        createdSort: "", // 记账日期时间排
        agentName: "",
        headId: "",
        relationNo: "",
        listType: "2",
      },
      tableData: [],
      total: 0,
      tableOption: [
        {key: "deliveryTime", value: "下单/配送日期"},
        {key: "productPopularName", value: "产品信息"},
        {key: "saleNum", value: "营销数量"},
        {key: "sellUnit", value: "计价单位"},
        {key: "headName", value: "负责营销职员"},
        {key: "createdAt", value: "记账日期"},
        {key: "relationNo", value: "关联单据编号"},
        {key: "agentName", value: "渠道客户名称"},
      ],
      checkListData: [
        "deliveryTime",
        "productPopularName",
        "saleNum",
        "sellUnit",
        "headName",
        "createdAt",
        "relationNo",
        "agentName",
      ],
      headList: crmStore.getters["company/getHeadOptions"],
      terminalDetailRef: null,
      rowData: null,
    });

    // 获取列表
    const handlList = () => {
      api.sellDetail.TSELLDETAIL_LIST(data.queryParams).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || [];
          data.total = res.data.total;
        }
      });
    };

    // 搜索
    const handlSearch = () => {
      data.queryParams.page = 1;
      handlList();
    };

    const handlReset = () => {
      data.queryParams = {
        productName: "", //
        pageSize: 20,
        page: 1,
        value: [],
        deliveryTimeSort: "", // // 发货/配送时间排序
        createdSort: "", // 记账日期时间排
        agentName: "",
        headId: "",
        relationNo: "",
        listType: "2",
      }
       handlList();
    }

    // 单机表格
    const aloneClick = (row, column, event) => {
      data.rowData = row;
      if (column.label === "操作") return;
      data.terminalDetailRef.open();
    };

    // 鼠标样式
    const cellStyle = () => {
      return "cursor:pointer;";
    };

    // 排序
    const handlSort = (row) => {
      if (row.column) {
        if (row.column.label === "下单/配送日期") {
          switch (row.order) {
            case "ascending":
              data.queryParams.deliveryTimeSort = "asc";
              break;
            case "descending":
              data.queryParams.deliveryTimeSort = "desc";
              break;
          }
        }
        if (row.column.label === "记账日期") {
          switch (row.order) {
            case "ascending":
              data.queryParams.createdSort = "asc";
              break;
            case "descending":
              data.queryParams.createdSort = "desc";
              break;
          }
        }
      }
      handlList();
    };

    onMounted(() => {
      handlList();
    });

    return {
      ...toRefs(data),
      handlList,
      handlSearch,
      handlReset,
      handlSort,
      cellStyle,
      aloneClick,
    };
  },
};
</script>

<style>
</style>
